<template>
  <div id="addLink" class="main-box">
    <BaseTitle :title="$t('友链管理')">
      <template #right>
        <BackBtn />
      </template>
    </BaseTitle>
    <el-form
      ref="addForm"
      :model="addForm"
      :rules="formRule"
      class="flexForm"
      label-position="top"
    >
      <el-form-item :label="$t('链接名称')" prop="name">
        <el-input v-model="addForm.name" />
      </el-form-item>
      <el-form-item :label="$t('链接地址')" prop="url">
        <el-input v-model="addForm.url" />
      </el-form-item>
      <el-form-item :label="$t('链接类型')" prop="url_type">
        <el-select v-model="addForm.url_type">
          <el-option :label="$t('友情交换')" :value="1" />
          <el-option v-if="type == 1" :label="$t('链接出售')" :value="2" />
          <el-option v-if="type == 2" :label="$t('链接购买')" :value="3" />
          <el-option v-if="type == 2" :label="$t('版权链接')" :value="4" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('网站类型')" prop="site_type">
        <el-select v-model="addForm.site_type">
          <el-option :label="$t('企业站')" :value="1" />
          <el-option :label="$t('新闻站')" :value="2" />
          <el-option :label="$t('博客站')" :value="3" />
          <el-option :label="$t('论坛站')" :value="4" />
          <el-option :label="$t('门户站')" :value="5" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('添加人')" prop="add_person">
        <el-input v-model="addForm.add_person" />
      </el-form-item>
      <el-form-item :label="$t('打开方式')" prop="target">
        <el-select v-model="addForm.target">
          <el-option :label="$t('本页面打开')" :value="1" />
          <el-option :label="$t('新页面打开')" :value="2" />
        </el-select>
      </el-form-item>

      <el-form-item :label="$t('排序')">
        <el-input v-model="addForm.sort" />
      </el-form-item>
      <el-form-item :label="$t('联系人')">
        <el-input v-model="addForm.contact_person" />
      </el-form-item>
      <el-form-item :label="$t('百度权重')">
        <el-input v-model="addForm.baidui_weight" />
      </el-form-item>
      <el-form-item :label="$t('联系电话')">
        <el-input v-model="addForm.mobile" />
      </el-form-item>
      <el-form-item :label="$t('链接位置')">
        <el-input v-model="addForm.position" />
      </el-form-item>
      <el-form-item :label="$t('添加时间')">
        <el-date-picker
          v-model="addForm.add_time"
          type="date"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item :label="$t('截止时间')">
        <el-date-picker
          v-model="addForm.end_time"
          type="date"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item :label="$t('导出链接')">
        <el-input v-model="addForm.export_link" />
      </el-form-item>
      <el-form-item :label="$t('交换平台')">
        <el-input v-model="addForm.exchange_platform" />
      </el-form-item>
      <el-form-item :label="$t('检查记录')">
        <el-select v-model="addForm.check_log">
          <el-option :label="$t('存在')" :value="1" />
          <el-option :label="$t('不存在')" :value="2" />
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('PR值')">
        <el-input v-model="addForm.pr_value" />
      </el-form-item>

      <el-form-item label="" class="submit-right">
        <el-button type="primary" @click="submit">{{ $t('保存') }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import linkApi from '@/api/link.js'
export default {
  data() {
    return {
      type: '',
      website_id: '',
      addForm: {
        website_id: this.$route.query.siteId,
        type: this.$route.query.type,
        name: '',
        url_type: '',
        add_person: '',
        sort: '',
        baidui_weight: '',
        position: '',
        export_link: '',
        check_log: 1,
        pr_value: '',
        url: '',
        site_type: '',
        target: 2,
        contact_person: '',
        mobile: '',
        add_time: '',
        end_time: '',
        exchange_platform: ''
      },
      formRule: {
        name: [
          {
            required: true,
            message: this.$t('请输入友情链接名称'),
            trigger: 'blur'
          }
        ],
        url_type: [
          {
            required: true,
            message: this.$t('请选择链接类型'),
            trigger: 'change'
          }
        ],
        site_type: [
          {
            required: true,
            message: this.$t('请选择网站类型'),
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            message: this.$t('请输入链接地址'),
            trigger: 'blur'
          }
        ],
        add_person: [
          { required: true, message: this.$t('请输入添加人'), trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.website_id = val

      if (value) {
        this.$router.push({ name: 'friendLink' })
      }
    }
  },
  created() {
    this.type = this.$route.query.type
    this.website_id = this.$route.query.siteId

    this.addForm.id = this.$route.query.id
    if (this.addForm.id) {
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      const val = {
        id: this.addForm.id,
        website_id: this.website_id,
        type: this.type
      }
      linkApi.linkInfo(val).then(res => {
        if (res.code == 0) {
          this.addForm = {
            id: this.$route.query.id,
            website_id: this.$route.query.siteId,
            type: this.$route.query.type,
            name: res.data.name,
            url_type: res.data.url_type,
            add_person: res.data.add_person,
            sort: res.data.sort,
            baidui_weight: res.data.baidui_weight,
            position: res.data.position,
            export_link: res.data.export_link,
            check_log: res.data.check_log,
            pr_value: res.data.pr_value,
            url: res.data.url,
            site_type: res.data.site_type,
            target: res.data.target,
            contact_person: res.data.contact_person,
            mobile: res.data.mobile,
            add_time: res.data.add_time,
            end_time: res.data.end_time,
            exchange_platform: res.data.exchange_platform
          }
        }
      })
    },
    //   保存
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (this.addForm.id) {
            linkApi.linkUpdate({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.$router.push({
                  name: 'friendLink',
                  query: { type: this.type }
                })
              }
            })
          } else {
            linkApi.linkSave({ ...this.addForm }).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.$router.push({
                  name: 'friendLink',
                  query: { type: this.type }
                })
              }
            })
          }
        } else {
          this.$message.error(this.$t('请填写必要信息'))
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.submit-right {
  margin-top: 30px;
}
</style>
